<template lang="pug">
    div(class="main-all")
        div(class="simulation-screen")
            slot
        span(class="simulation-back",@click="butonClick('back')")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop")  保存并退出
        span(class="simulation-up",v-touch:start="startUp",v-touch:end="endUp",v-touch:moved="upMoved")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop") 增加或上移
        span(class="simulation-down",v-touch:start="startDown",v-touch:end="endDown",v-touch:moved="downMoved")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop") 减少或下移
        span(class="simulation-yes",v-touch:start="YesStart",v-touch:end="YesEnd",v-touch:moved="YesMoved",v-if="yesLongTab")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop") 确定或进入
        span(class="simulation-yes",@click="butonClick('yes')",v-else)
            span(class="back-line no-pop")
                span(class="back-line-text no-pop") 确定或进入
</template>

<script>
import dayjs from "dayjs";

export default {
  name: "skin",
  data() {
    return {
      startAt: null, // 按钮按下时间
      downInterval: null,
      upInterval: null,
      actInterval: null
    };
  },
  props: {
    yesLongTab: { type: Boolean, default: false } // 是否支持长按yes按钮
  },
  methods: {
    /**计算模拟器屏幕高度 */
    calSimulationScreenHeight() {

    },
    /**计算模拟器四个按钮所在的位置 */
    calSimulationButtonsHeight() {
      var classes = [
        ".simulation-back",
        ".simulation-up",
        ".simulation-down",
        ".simulation-yes"
      ];

      classes.forEach(c => {
        var d = document.querySelector(c);
        var width = d.clientWidth;
        d.style.height = width + "px";
      });
    },

    butonClick(eventName) {
      this.$emit(eventName);
    },

    ////////////////////////////////////////////////////
    YesStart() {
      this.startAt = dayjs();
      if (this.actInterval != null) return;
      this.actInterval = setInterval(
        function() {
          this.$emit("during-yes"); // 每0.5秒触发一次during事件，如果是click事件，那么在没执行之前，就会在endDown中被clear掉
          this.$emit("yes-longtap");
        }.bind(this),
        500
      );
    },

    YesEnd() {
      clearInterval(this.actInterval);
      this.actInterval = null;
      const milliseconds = dayjs().diff(this.startAt, "milliseconds");
      if (milliseconds < 300) {
        this.$emit("yes");
      } else {
        this.$emit("yes-moved");
      }
    },

    YesMoved() {
      // 清除轮询，因为手机上长按移出不会触发click
      clearInterval(this.actInterval);
      this.$emit("yes-moved");
    },
    ////////////////////////////////////////////////////

    startDown() {
      this.startAt = dayjs();
      if (this.downInterval == null) {
        this.downInterval = setInterval(
          function() {
            this.$emit("duringDown"); // 每0.5秒触发一次during事件，如果是click事件，那么在没执行之前，就会在endDown中被clear掉
            this.$emit("downlongtap");
          }.bind(this),
          500
        );
      }
    },
    endDown() {
      clearInterval(this.downInterval);
      this.downInterval = null;
      var milliseconds = dayjs().diff(this.startAt, "milliseconds");
      if (milliseconds < 300) {
        this.$emit("down");
      }
    },
    downMoved() {
      // 清除轮询，因为手机上长按移出不会触发click
      clearInterval(this.downInterval);
      this.$emit("down-moved");
    },

    ////////////////////////////////////////////////////

    startUp() {
      this.startAt = dayjs();
      const vm = this;
      this.upInterval = setInterval(function() {
        vm.$emit("duringUp"); // 每0.5秒触发一次during事件，如果是click事件，那么在没执行之前，就会在endDown中被clear掉
        vm.$emit("uplongtap");
      }, 500);
    },
    endUp() {
      clearInterval(this.upInterval);
      this.$emit("up-end");
      const milliseconds = dayjs().diff(this.startAt, "milliseconds");
      if (milliseconds < 300) {
        this.$emit("up");
      }
    },
    upMoved() {
      clearInterval(this.upInterval);
      this.$emit("up-moved");
    }
    ////////////////////////////////////////////////////
  },
  mounted() {
    this.calSimulationButtonsHeight();

    const keyboard = document.querySelector(".main-all"); //键盘

    keyboard.addEventListener("contextmenu", function(e) {
      e.preventDefault();
    });

    const spans = document.getElementsByClassName("no-pop");

    for (var index = 0; index < spans.length; index++) {
      doSet(index, spans);
    }

    function doSet(index, spans) {
      const span = spans[index];
      span.addEventListener("mousedown", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      span.addEventListener("mouseup", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      span.addEventListener("touchend", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      span.addEventListener("touchmove", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      span.addEventListener("touchstart", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      span.addEventListener("click", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
    }
  }
};
</script>

<style lang="less">
@height: 18%;
@width: @height * 520 / 1000;
@left: 78%;

.simulation-screen {
  position: absolute;
  width: 184px;
  height: 107px;

  line-height: normal;
  overflow: hidden;

  left: 127px;
  top: 36px;
}

.simulation-back,
.simulation-up,
.simulation-down,
.simulation-yes {
  width: @width;
  height: @height;
  display: inline-block;
  position: absolute;
  left: @left;
  // border:1px solid red;
}

@back-line-color: #ff6600;

.back-line {
  width: 15vh;
  height: 1px;
  left: 100%;
  top: 50%;
  border-top: 1px solid @back-line-color;
  position: absolute;
  display: inline-block;

  .back-line-text {
    position: absolute;
    right: -80px;
    top: -13px;
  }
}

.simulation-yes {
  top: 68.4%;
  left: @left - 2;
  width: @width + 2;
  height: @height - 2;
}

.simulation-back {
  top: 49.4%;
}

.simulation-up {
  top: 9.5%;
}

.simulation-down {
  top: 29.3%;
}
</style>
